<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">
        .main {
            margin: 40px auto;
            width:1200px;
            height:500px;
            overflow: hidden;
        }
        .main li{
            position: relative;
            float: left;
            margin-right: 0.3%;
            width: 10.8%;
            height: 100%;
        }
        .main li:nth-last-of-type(1){ margin-right: 0; }
        .main-img{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .des{
            position: absolute;
            left: 0;
            top: 0;
            padding-top: 118px;
            width: 100%;
            height: 382px;
            line-height: 60px;
            /*background-color: #eaf5fc;*/
            background: rgba(255,255,255,0.8);
            color: #0089c4;
            font-size: 45px;
            text-align: center;
            z-index: 1;
        }
        .main li:nth-of-type(1) .main-img{ background: url("img/breeding3.jpg") no-repeat left center;}
        .main li:nth-of-type(2) .main-img{ background: url("img/breeding4.jpg") no-repeat left center;}
        .main li:nth-of-type(3) .main-img{ background: url("img/breeding5.jpg") no-repeat left center;}
        .main li:nth-of-type(4) .main-img{ background: url("img/breeding6.jpg") no-repeat left center;}
        .main li:nth-of-type(5) .main-img{ background: url("img/breeding7.jpg") no-repeat left center;}
        .main-content{
            position: absolute;
            left: 0;
            bottom: -100%;
            /*padding: 18px 7.53% 16px 2.1%;
            width: 90.37%;*/
            padding: 18px 50px 16px 14px;
            width: 600px;
            height: 48px;
            background-color: rgba(255,255,255,0.8);
        }
        .main-content.main-content-show{bottom: 0;}
        .main-content span{
            display: block;
            float: left;
            width: 23.33%;
            height: 100%;
            line-height: 48px;
            color: #0089c4;
            font-size: 28px;
            text-align: center;
        }
        .main-content p{
            float: left;
            width: 76.67%;
            line-height: 24px;
            color: #313a3d;
            font-size: 15px;
        }
        .main li.main-on{ width: 55.32%; }
        .main li.main-on .des{ display: none; }
        .main li.main-on .main-content{ bottom: 0; }

    </style>
   
</head>
<body>

    <ul class="main">
        <li class="main-on">
            <h4 class="des">风<br/>险<br/>低</h4>
            <div class="main-img">
                <div class="main-content">
                    <span>风险低</span>
                    <p>望海水产基地依托基地的科技水平、政府支持、完善的线上线下营销体系，产销一体化，低风险。</p>
                </div>
            </div>
        </li>
        <li>
            <h4 class="des">收<br/>益<br/>高</h4>
            <div class="main-img">
                <div class="main-content">
                    <span>收益高</span>
                    <p>第一年购入虾苗，第二年无需再购，自行繁育培育，节省成本，投放少，收益高。</p>
                </div>
            </div>
        </li>
        <li>
            <h4 class="des">周<br/>期<br/>短</h4>
            <div class="main-img">
                <div class="main-content">
                    <span>周期短</span>
                    <p>科学养殖的小龙虾成长周期为1-2个月，短时间内即可获得收益。</p>
                </div>
            </div>
        </li>
        <li>
            <h4 class="des">产<br/>量<br/>高</h4>
            <div class="main-img">
                <div class="main-content">
                    <span>产量高</span>
                    <p>领先行业的养殖技术，优越的地理环境，科学的配比投苗，1亩虾塘产量高达90%成活率。</p>
                </div>
            </div>
        </li>
        <li>
            <h4 class="des">品<br/>质<br/>优</h4>
            <div class="main-img">
                <div class="main-content">
                    <span>品质优</span>
                    <p>黄河湿地生态系统，优越的地理环境，纯净的空气水质，小龙虾个大鲜活，色泽鲜亮，腮净腹白，肉鲜黄肥。</p>
                </div>
            </div>
        </li>
    </ul>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        (function() {
            $mainLi  = $(".main li");
            var $mainLiWidth = $(".main li").eq(1).width();
            var $mainContent = $(".main-on").width();

            $(window).resize(function () {
                $mainLiWidth = $(".main li").eq(1).width();
                $mainContent = $(".main-on").width();

            });
            $mainLi.hover(function() {
                $(this).stop(true).animate({
                    width: $mainContent
                },800).addClass("main-on").siblings('li').stop(true).animate({
                    width: $mainLiWidth 
                },800).removeClass("main-on");

                $(this).find(".main-content").stop(true).animate({
                    bottom: 0
                },1000);
                $(this).siblings().find(".main-content").stop(true).animate({
                    bottom: "-100%"
                },1000);
            });
        })();
    </script>

</body>
</html>